import React from 'react';
import { Button } from 'antd';
import { VtxModal, VtxMap } from 'vtx-ui';
import styles from './ViewItem.less';
import { NAME_SPACE } from './config';

class Index extends React.Component{
  constructor(props){
    super(props)
    this.goBack = this.goBack.bind(this)
  }
  goBack(){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        detailsModelVisable: false,
      }
    })
  };
  render(){
    const {detailsModelVisable, details, dispatch} = this.props
    let modalProps = {
      footer: [
          <Button key="back" onClick={this.goBack}>返回</Button>,
      ],
      onCancel:this.goBack,
      maskClosable: false,
      title:'详情',
      visible: detailsModelVisable,
      width: 900,
    };

    const getType = (type) => {
      let name
      switch (type) {
        case 1:
          name = '医院';
          break;
        case 2:
          name = '诊所';
          break;
        case 3:
          name = '疾病预防控制中心';
          break;
        case 4:
          name = '社区卫生服务中心';
          break;
        case 5:
          name = '门诊部';
          break;
        case 6:
          name = '卫生所';
          break;
        case 7:
          name = '卫生室';
          break;
        case 8:
          name = '卫生院';
          break;
        case 9:
          name = '服务站';
          break;
        default:
          break;
      }
      return name
    }

    return(
      <div>
        <VtxModal {...modalProps}>
          <div>
            <div className = {styles.item}>
                <div className = {styles.halfContent}>
                    <div className = {styles.title}>医疗机构名称：</div>
                    <div className = {styles.content}>{details.hospitalName}</div>
                </div>
                <div className = {styles.halfContent}>
                    <div className = {styles.title}>类型：</div>
                    <div className = {styles.content}>{getType(details.hospitalType)}</div>
                </div>
            </div>
            <div className = {styles.item}>
                <div className = {styles.halfContent}>
                    <div className = {styles.title}>地址：</div>
                    <div className = {styles.content}>{details.hospitalAddress}</div>
                </div>
                <div className = {styles.halfContent}>
                    <div className ={styles.title}>账号状态：</div>
                    <div className = {styles.content}>{details.status==1? '冻结' : details.status==2?'正常' : ''}</div>
                </div>
            </div>
            <div className = {styles.item}>
                <div className = {styles.halfContent}>
                    <div className ={styles.title}>联系人：</div>
                    <div className = {styles.content}>{details.contacts}</div>
                </div>
                <div className = {styles.halfContent}>
                    <div className = {styles.title}>联系方式：</div>
                    <div className = {styles.content}>{details.phone}</div>
                </div>
            </div>
            <div className = {styles.item}>
                <div className = {styles.halfContent}>
                    <div className ={styles.title}>小程序账号名称：</div>
                    <div className = {styles.content}>{details.userName}</div>
                </div>
                <div className = {styles.halfContent}>
                    <div className = {styles.title}>小程序账号密码：</div>
                    <div className = {styles.content}>{details.password}</div>
                </div>
            </div>
            <div className = {styles.item}>
               
            </div>
          </div>
        </VtxModal>
      </div>
    )
  }
}
export default Index